<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    style="position: fixed; width: 100%;top: 0;z-index:99"
  >
    <el-menu-item
      style="margin-left: 10%"
      index="/index"
      @click="$router.push({ path: '/index' })"
    >
      首页
    </el-menu-item>
    <el-menu-item
      index="/activity"
      @click="$router.push({ path: '/activity' })"
      v-if="this.$store.state.user.userId !== 0"
    >
      活动
    </el-menu-item>
    <el-menu-item v-if="this.$store.state.user.userId !== 0" index="/order" @click="$router.push({ path: '/order' })">
      我的订单
    </el-menu-item>
    <el-menu-item v-if="this.$store.state.user.userId !== 0" index="/myWork" @click="$router.push({ path: '/myWork' })">
      我的帖子
    </el-menu-item>
    <el-menu-item v-if="this.$store.state.user.userId !== 0" index="/create" @click="$router.push({ path: '/create' })">
      发布帖子
    </el-menu-item>
    <el-menu-item v-if="!$store.state.user.is_login" style="float: right; margin-right: 10%" index="/login" @click="$router.push({ path: '/login' })">
      登录
    </el-menu-item>
    <el-menu-item v-if="!$store.state.user.is_login" style="float: right;" index="/register" @click="$router.push({ path: '/register' })">
      注册
    </el-menu-item>
    <el-submenu v-else style="float: right; margin-right: 10%" index="4">
      <template slot="title">
        <el-avatar :src="$store.state.user.avatar"/>
      </template>
      <el-menu-item index="/space" @click="$router.push({ path: '/space' })">
        我的空间
      </el-menu-item>
      <el-menu-item index="/info" @click="$router.push({ path: '/info' })">
        个人信息
      </el-menu-item>
      <el-menu-item index="/camera" @click="$router.push({ path: '/camera' })">
        摄影师申请
      </el-menu-item>
      <el-divider></el-divider>
      <el-menu-item index="4-4" @click="logout">退出登录</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script lang="js">
  import ActivityView from '@/views/ActivityView.vue';

  export default {
    comments: {
      ActivityView
    },
    data() {
      return {
        is_login: true,
        activeIndex: '/index'
      };
    },
    watch: {
      $route() {
        this.handleSelect()
      }
    },
    created() {
      this.handleSelect()
    },
    methods: {
      handleSelect() {
        this.activeIndex = this.$route.path;
      },
      logout() {
        this.$store.commit("logout")
        this.$router.push({path: "/login"})
      }
    }
  }
</script>

<style scoped>
img {
  
}
</style>